<!DOCTYPE html>
<html>
<head>
    <title>专家管理</title>
    <#include "../../include/head-file.ftl"/>
    <link rel="stylesheet" href="${base}/static/ms-admin/4.7.2/css/index.css">
    <!-- 引入echarts -->
    <script src="${base}/static/plugins/echarts/echarts.min.js"></script>
    <style>
        .ms-admin-expert-container {
            margin: 12px;
            height: 100%;
        }
        
        .ms-container {
            height: calc(100% - 50px);
            padding: 0;
            display: flex;
            flex-direction: column;
        }
        
        .ms-header {
            padding: 0;
            margin-bottom: 10px;
        }
        
        .ms-search {
            display: flex;
            align-items: center;
        }
        
        .ms-search .el-button {
            margin-left: 10px;
        }
        
        .ms-table {
            width: 100%;
            flex: 1;
        }
        
        .el-link {
            margin-right: 10px;
        }
        
        .import-template {
            margin-top: 10px;
            text-align: center;
        }
        
        /* 美化表格样式 */
        .el-table--border, .el-table--group {
            border: 1px solid #EBEEF5;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .el-table th {
            background-color: #f5f7fa;
        }
        
        /* 美化标题样式 */
        .el-dialog__title {
            font-weight: bold;
            color: #303133;
        }
        
        /* 美化弹窗内容 */
        .el-dialog__body {
            padding: 20px;
            color: #606266;
        }
    </style>
</head>
<body>
<div id="app" class="ms-admin-expert-container">
    <el-header class="ms-header" height="50px">
        <el-col :span="24">
            <@ms.search class="ms-search" action="">
                <@ms.searchInput name="keyword" label="请输入专家姓名或编号" title="请输入专家姓名或编号" value="" />
                <el-button type="primary" icon="el-icon-plus" @click="navigateToAddForm">添加专家</el-button>
            </@ms.search>
        </el-col>
    </el-header>
    <el-main class="ms-container">
        <el-table ref="multipleTable" height="calc(100% - 100px)" class="ms-table" border :data="dataList" tooltip-effect="dark" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="expertCode" label="专家编号" width="100" align="center"></el-table-column>
            <el-table-column prop="name" label="专家姓名" width="120" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" width="60" align="center"></el-table-column>
            <el-table-column prop="age" label="年龄" width="80" align="center"></el-table-column>
            <el-table-column prop="title" label="职称/头衔" width="120" align="center"></el-table-column>
            <el-table-column prop="highestEducation" label="最高学历" width="100" align="center"></el-table-column>
            <el-table-column prop="college" label="所属学院" min-width="120" align="center"></el-table-column>
            <el-table-column prop="insideOutside" label="校内/外" width="80" align="center"></el-table-column>
            <el-table-column prop="researchKeywords" label="研究方向" min-width="200" align="center"></el-table-column>
            <el-table-column prop="contact" label="联系方式" min-width="120" align="center"></el-table-column>
            <el-table-column label="操作" align="center" min-width="180">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleDetails(scope.row)">详情</el-button>
                    <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="handleRelationQuery(scope.row)">关联查询</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-main>
    <ms-dialog :title="expertForm.id ? '编辑专家' : '添加专家'" :visible.sync="dialogVisible" width="70%">
        <el-form ref="expertForm" :model="expertForm" :rules="rules" label-width="120px" size="small">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="专家编号" prop="expertCode">
                        <el-input v-model="expertForm.expertCode"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="专家姓名" prop="name">
                        <el-input v-model="expertForm.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="性别" prop="gender">
                        <el-select v-model="expertForm.gender" placeholder="请选择性别" style="width: 100%">
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄" prop="age">
                        <el-input-number v-model="expertForm.age" :min="1" :max="150" style="width: 100%"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="职称/头衔" prop="title">
                        <el-input v-model="expertForm.title"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="最高学历" prop="highestEducation">
                        <el-select v-model="expertForm.highestEducation" placeholder="请选择学历" style="width: 100%">
                            <el-option label="博士" value="博士"></el-option>
                            <el-option label="硕士" value="硕士"></el-option>
                            <el-option label="学士" value="学士"></el-option>
                            <el-option label="其他" value="其他"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="一级学科" prop="firstLevelDiscipline">
                        <el-input v-model="expertForm.firstLevelDiscipline"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="二级学科" prop="secondLevelDiscipline">
                        <el-input v-model="expertForm.secondLevelDiscipline"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="所属学院" prop="college">
                        <el-input v-model="expertForm.college"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="校内/外标识" prop="insideOutside">
                        <el-select v-model="expertForm.insideOutside" placeholder="请选择" style="width: 100%">
                            <el-option label="校内" value="校内"></el-option>
                            <el-option label="校外" value="校外"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="研究方向关键词" prop="researchKeywords">
                        <el-input v-model="expertForm.researchKeywords" placeholder="多个关键词请用逗号分隔"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="成果类型" prop="achievementType">
                        <el-input v-model="expertForm.achievementType"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="知识产权数" prop="ipOwnership">
                        <el-input-number v-model="expertForm.ipOwnership" :min="0" style="width: 100%"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="社会职务数" prop="socialPositions">
                        <el-input-number v-model="expertForm.socialPositions" :min="0" style="width: 100%"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="纵向项目数" prop="verticalProjects">
                        <el-input-number v-model="expertForm.verticalProjects" :min="0" style="width: 100%"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="横向项目数" prop="horizontalProjects">
                        <el-input-number v-model="expertForm.horizontalProjects" :min="0" style="width: 100%"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系方式" prop="contact">
                        <el-input v-model="expertForm.contact"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="备注" prop="remarks">
                        <el-input type="textarea" v-model="expertForm.remarks" :rows="3"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveExpert">确 定</el-button>
        </span>
    </ms-dialog>
    
    <!-- 专家详情弹窗 -->
    <el-dialog title="专家详情" :visible.sync="detailsVisible" width="70%">
        <el-descriptions :column="2" border>
            <el-descriptions-item label="专家编号">{{ expertDetails.expertCode }}</el-descriptions-item>
            <el-descriptions-item label="专家姓名">{{ expertDetails.name }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ expertDetails.gender }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ expertDetails.age }}</el-descriptions-item>
            <el-descriptions-item label="职称/头衔">{{ expertDetails.title }}</el-descriptions-item>
            <el-descriptions-item label="最高学历">{{ expertDetails.highestEducation }}</el-descriptions-item>
            <el-descriptions-item label="一级学科">{{ expertDetails.firstLevelDiscipline }}</el-descriptions-item>
            <el-descriptions-item label="二级学科">{{ expertDetails.secondLevelDiscipline }}</el-descriptions-item>
            <el-descriptions-item label="所属学院">{{ expertDetails.college }}</el-descriptions-item>
            <el-descriptions-item label="校内/外标识">{{ expertDetails.insideOutside }}</el-descriptions-item>
            <el-descriptions-item label="研究方向关键词" :span="2">{{ expertDetails.researchKeywords }}</el-descriptions-item>
            <el-descriptions-item label="成果类型">{{ expertDetails.achievementType }}</el-descriptions-item>
            <el-descriptions-item label="知识产权数">{{ expertDetails.ipOwnership }}</el-descriptions-item>
            <el-descriptions-item label="社会职务数">{{ expertDetails.socialPositions }}</el-descriptions-item>
            <el-descriptions-item label="纵向项目数">{{ expertDetails.verticalProjects }}</el-descriptions-item>
            <el-descriptions-item label="横向项目数">{{ expertDetails.horizontalProjects }}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{ expertDetails.contact }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ expertDetails.remarks }}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
    
    <!-- Excel导入弹窗 -->
    <el-dialog title="导入专家数据" :visible.sync="importVisible" width="500px">
        <el-upload
                class="upload-demo"
                drag
                :action="ms.manager + '/expertmanage/expert/import'"
                :on-success="handleImportSuccess"
                :on-error="handleImportError"
                :before-upload="beforeImportUpload"
                :file-list="importFileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只支持.xlsx, .xls格式的Excel文件</div>
        </el-upload>
        <div class="import-template">
            <span>没有导入模板？</span>
            <el-button type="text" @click="downloadTemplate">下载模板</el-button>
        </div>
    </el-dialog>
</div>
</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: [], // 专家列表数据
            selectionList: [], // 多选数据
            loading: false, // 加载状态
            keyword: '', // 搜索关键字
            dialogVisible: false, // 表单弹窗显示状态
            detailsVisible: false, // 详情弹窗显示状态
            importVisible: false, // 导入弹窗显示状态
            importFileList: [], // 导入文件列表
            expertForm: {}, // 专家表单数据
            expertDetails: {}, // 专家详情数据
            rules: {
                expertCode: [
                    { required: true, message: '请输入专家编号', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入专家姓名', trigger: 'blur' }
                ]
            }
        },
        methods: {
            // 查询专家列表
            list: function () {
                var that = this;
                that.loading = true;
                ms.http.get(ms.manager + "/expertmanage/expert/list", {
                    params: {
                        params: [1, 10], // 固定为第1页，每页10条
                        keyword: that.keyword
                    }
                }).then(function (res) {
                    if (res.result) {
                        that.dataList = res.data.records;
                    } else {
                        console.error("请求失败: " + res.msg);
                    }
                    that.loading = false;
                }).catch(function(error) {
                    console.error("请求异常: ", error);
                    that.loading = false;
                });
            },
            // 重置表单
            resetForm: function() {
                this.expertForm = {
                    socialPositions: 0,
                    verticalProjects: 0,
                    horizontalProjects: 0,
                    ipOwnership: 0
                };
                if (this.$refs.expertForm) {
                    this.$refs.expertForm.resetFields();
                }
            },
            // 显示新增专家弹窗
            handleAdd: function () {
                this.resetForm();
                this.dialogVisible = true;
            },
            // 显示编辑专家弹窗
            handleEdit: function (row) {
                this.resetForm();
                this.expertForm = JSON.parse(JSON.stringify(row));
                this.dialogVisible = true;
            },
            // 显示专家详情
            handleDetails: function (row) {
                this.expertDetails = row;
                this.detailsVisible = true;
            },
            // 保存专家信息
            saveExpert: function () {
                var that = this;
                this.$refs.expertForm.validate(function (valid) {
                    if (valid) {
                        var url = that.expertForm.id ? ms.manager + "/expertmanage/expert/update" : ms.manager + "/expertmanage/expert/save";
                        ms.http.post(url, JSON.stringify(that.expertForm)).then(function (res) {
                            if (res.result) {
                                that.$notify({
                                    title: '成功',
                                    message: '保存成功',
                                    type: 'success'
                                });
                                that.dialogVisible = false;
                                that.list();
                            } else {
                                that.$notify({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 删除专家
            handleDelete: function (index, row) {
                var that = this;
                this.$confirm('确认删除该专家？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    ms.http.post(ms.manager + "/expertmanage/expert/delete/" + row.expertCode).then(function (res) {
                        if (res.result) {
                            that.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            });
                            that.list();
                        } else {
                            that.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    });
                }).catch(function () {});
            },
            // 批量删除
            handleDeleteAll: function () {
                if (this.selectionList.length == 0) {
                    this.$notify({
                        title: '提示',
                        message: '请选择要删除的专家',
                        type: 'warning'
                    });
                    return;
                }
                var that = this;
                this.$confirm('确认删除选中的专家？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    var ids = [];
                    that.selectionList.forEach(function (item) {
                        ids.push(item.id);
                    });
                    ms.http.post(ms.manager + "/expertmanage/expert/delete", JSON.stringify(ids), {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(function (res) {
                        if (res.result) {
                            that.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            });
                            that.list();
                        } else {
                            that.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    });
                }).catch(function () {});
            },
            // 多选改变
            handleSelectionChange: function (selection) {
                this.selectionList = selection;
            },
            // 搜索
            search: function () {
                this.list();
            },
            // 显示导入弹窗
            handleImport: function () {
                this.importVisible = true;
                this.importFileList = [];
            },
            // 上传文件前检查
            beforeImportUpload: function (file) {
                var isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
                if (!isExcel) {
                    this.$message.error('上传文件只能是Excel格式!');
                    return false;
                }
                return true;
            },
            // 导入成功回调
            handleImportSuccess: function (response, file, fileList) {
                if (response.result) {
                    this.$notify({
                        title: '成功',
                        message: response.data,
                        type: 'success'
                    });
                    this.importVisible = false;
                    this.list();
                } else {
                    this.$notify({
                        title: '失败',
                        message: response.msg,
                        type: 'warning'
                    });
                }
            },
            // 导入失败回调
            handleImportError: function (err, file, fileList) {
                this.$notify({
                    title: '失败',
                    message: '导入失败，请检查文件格式',
                    type: 'error'
                });
            },
            // 下载模板
            downloadTemplate: function () {
                window.location.href = ms.manager + "/expertmanage/expert/template";
            },
            // 关联查询
            handleRelationQuery: function (row) {
                // 跳转到关联查询页面
                location.href = ms.manager + "/expertmanage/relation/index?expertCode=" + row.expertCode;
            },
            // 导航到添加表单
            navigateToAddForm: function () {
                location.href = ms.manager + "/expertmanage/expert/form";
            }
        },
        mounted: function () {
            this.list();
            this.resetForm();
        }
    });
</script> 